let cascadeFlow = (function () {
    // 获取需要操作的DOM元素
    let cards = Array.from(document.querySelectorAll('.card')),
        _data = [];

    // 获取数据
    let queryData = function queryData() {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', '../json/data.json', false);
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                _data = JSON.parse(xhr.responseText);
            }
        };
        xhr.send(null);
    };

    // 实现数据绑定
    let bindHTML = function bindHTML() {
        _data = _data.map(item => {
            let w = item.width,
                h = item.height;
            h = h / (w / 236);
            item.height = h;
            return item;
        });

        // 按照5个为一组进行循环
        for (let i = 0; i < _data.length; i += 5) {
            let group = _data.slice(i, i + 5);
            group.sort((a, b) => a.height - b.height);
            cards.sort((a, b) => b.offsetHeight - a.offsetHeight);

            group.forEach((item, index) => {
                let {
                    pic,
                    title,
                    height
                } = item;
                let carder = document.createElement('div');
                carder.className = "carder";
                carder.innerHTML = ` <a href="#">
                <div class="lazyImageBox" style="height:${height}px">
                    <img src="" alt="" data-image="${pic}">
                </div>
                <p>${title}</p>
            </a>`;
                cards[index].appendChild(carder);
            });
        }
    };

 	// 延迟加载
     let lazyFunc = function lazyFunc() {
		let lazyImageBoxs = document.querySelectorAll('.lazyImageBox');
		[].forEach.call(lazyImageBoxs, lazyImageBox => {
			let isLoad = lazyImageBox.getAttribute('isLoad');
			if (isLoad === "true") return;
			let B = utils.offset(lazyImageBox).top +
				lazyImageBox.offsetHeight / 2;
			let A = document.documentElement.clientHeight +
				document.documentElement.scrollTop;
			if (B <= A) {
				lazyImg(lazyImageBox);
			}
		});
	};
	let lazyImg = function lazyImg(lazyImageBox) {
		let img = lazyImageBox.querySelector('img'),
			dataImage = img.getAttribute('data-image'),
			tempImage = new Image;
		tempImage.src = dataImage;
		tempImage.onload = () => {
			img.src = dataImage;
			utils.css(img, 'opacity', 1);
		};
		img.removeAttribute('data-image');
		tempImage = null;
		lazyImageBox.setAttribute('isLoad', 'true');
	};

	// 加载更多数据
	let isRender;
	let loadMoreData = function loadMoreData() {
		let HTML = document.documentElement;
		if (HTML.clientHeight + HTML.clientHeight / 2 + HTML.scrollTop >= HTML.scrollHeight) {
			if (isRender) return;
			isRender = true;
			queryData();
			bindHTML();
			lazyFunc();
			isRender = false;
		}
	};


    return {
        init() {
            queryData();
            bindHTML();
            lazyFunc();
            window.onscroll = function () {
            	lazyFunc();
            	loadMoreData();
            };
        }
    }
})();
cascadeFlow.init();